<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/lib/jquery-easyui/themes/default/easyui.css">
    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="/lib/sockjs/sockjs.js"></script>
    <script src="/lib/stomp.js"></script>
</head>
<body>
<table class="table" style="width: 100%">
    <tr>
        <td>手动模拟：</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>请选择需要操作的设备：</td>
        <td>
            <input id="deviceName" name="deviceName" class="easyui-combobox" style="width:150px"
                   data-options="url:'deviceNameComboBox',method:'post',panelHeight:'auto',
                           valueField:'device_Name',textField:'device_Name'">
        </td>
        <td>
            <input type="button" value="开工"
                   onclick="javascript: $.messager.alert('提示','暂未开发！', 'info');" class="easyui-linkbutton">
            <input type="button" value="完工"
                   onclick="javascript: $.messager.alert('提示','暂未开发！', 'info');" class="easyui-linkbutton">
        </td>
    </tr>
    <tr>
        <td>自动模拟：</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>设备模拟器状态：<span id="AutoSimulatorStatus"></span></td>
        <td>
            <input type="button" value="Start" onclick="AutoStatusChange('Start')" class="easyui-linkbutton">
            <input type="button" value="Stop"  onclick="AutoStatusChange('Stop')" class="easyui-linkbutton">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>工作模拟：<span id="AutoWorkOrder"></span></td>
        <td>
            <input type="button" value="Start" onclick="AutoWorkOrder('Start')" class="easyui-linkbutton">
            <input type="button" value="Stop" onclick="AutoWorkOrder('Stop')" class="easyui-linkbutton">
        </td>
    </tr>
    <tr style="background-color: #0a0a0a">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<script>
    var stompClient = null;
    $(function(){
        connect();
        setAutoSimulatorStatus();
        setAutoWorkOrder();
    });

    function setAutoSimulatorStatus() {
        $.post("getAutoStatusChange", null, function (data) {$("#AutoSimulatorStatus").html(data.msg);}, "json")
    }
    function setAutoWorkOrder() {
        $.post("getAutoWorkOrder", null, function (data) {$("#AutoWorkOrder").html(data.msg);}, "json")
    }

    function connect() {
        var socket = new SockJS('/mj-websocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            console.log('Connected:' + frame);
            stompClient.subscribe('/topicSimulator/AutoStatusChange', function (data) {
                $("#AutoSimulatorStatus").html(data.body);
            });
            stompClient.subscribe('/topicSimulator/AutoWorkOrder', function (data) {
                $("#AutoWorkOrder").html(data.body);
            })
        });
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log('Disconnected');
    }
    function AutoStatusChange(changeFlag) {
//        var changeFlag = $('#deviceStatusAuto').val();
//        console.log('changeFlag:' + changeFlag);
        stompClient.send("/AutoStatusChange", {}, changeFlag);
    }

    function AutoWorkOrder(changeFlag) {
        stompClient.send("/AutoWorkOrder", {}, changeFlag);
    }

</script>
</body>
</html>